<template>
  <div>
    <!-- 
      过滤器filter
      作用：处理数据返回新数据
      语法：
      Vue.filter("过滤器名",(值)=>{return 处理后的值 }) -- 全局过滤器（就是在任意一个vue都可以使用） main.js中进行注册
      filters: { "过滤器名": (值)=>{ return 处理后的值 } } -- 局部过滤器(在当前的vue文件中才可以使用) 在vue文件中进行注册

      过滤器使用语法：
        变量 | 过滤器名字
      
      注意：过滤器只能使用在插值表达式和v-bind动态属性里
     -->
    <h1>{{ msg | reverseStr }}</h1>
    <h2 :title="msg | toUp">测试过滤器，设置title属性</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world!",
    };
  },
  filters: {
    // 字符串翻转
    reverseStr: (val) => {
      return val.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>